<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/top.css">
    <title>服务评价</title>
    <style>
        body{ width: 100%; margin: 0; padding: 0; font-family: '微软雅黑';}
		body p{color:#949494; font-size:14px; padding-left:10px;}
		a:link,a:visited,a:hover,a:active{text-decoration: none;color: white;}
        input::-ms-input-placeholder{text-align: center;}
		.header{ text-align: center; background-color: #F9BC69; color: aliceblue; width: 100%; height: 40px; line-height: 40px;}
		.h-left{float:left;width:15%; height:40px;}
        .h-left a{ display:block; width:45px; height:40px; margin:auto; background: url(images/splb_icon_back.png) no-repeat 15px center; background-size: auto 16px; }
		.h-mid { width:70%; height:40px; float:left; text-align:center; color:#333; font-size:16px; line-height:45px; position:relative;}
		.h-mid span { color:#FFF; font-size:12px;}
		.body{width:100%}
		.evaluate{margin:0 auto;width:320px; padding-top:30px}
		.evaluate span{color:#949494;float:left; padding-left:20px;padding-top:35px;font-size:14px}
		.circle{width:90px;height:90px;border-radius:50px;border:solid #F9BC69 1px;background-color:#F9BC69; text-align:center;font-size:50px;line-height:90px;color:white;float:left; font-weight:bold;}
		.stars{padding-left:4.5%;width:90.5%}
		.note{float:right;padding-right:20px;color:#949494;}
    	.describtion{width:94.5%;padding-top:10px;float:left; margin-left:10px;margin-right:10px}
		.describtion span{color:#949494;font-size:14px;}
		.describinput{width:100%;border:1px solid #949494; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;height:50px}
		.describsubmit{margin-top:1%;text-align:center;line-height:300%;width:100%;height:35px;border:1px solid #F06673; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; background-color:#FFAB00; color:white}
    </style>
    <link type="text/css" href="css/zzsc.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>
</head>
<body>
   <div class="header">
    	 	<div class="top" style="border-bottom:1px solid #9A9997;">
        <div class="top_left"><a class="sb-back" href="javascript:history.back(-1)" title="返回"><img src="images/icon_back.png" alt=""></a></div>
        服务评价
    </div>
    </div>
    <div class="body">
    	<div class="evaluate"><span>你对本次消费评价：</span><div class="circle">76</div></div>
        <div class="stars">
            <div class="xzw_starSys"><span>店铺环境：</span>
                <div class="xzw_starBox">
                    <ul class="star">
                        <li><a href="javascript:void(0)" title="1" class="one-star">1</a></li>
                        <li><a href="javascript:void(0)" title="2" class="two-stars">2</a></li>
                        <li><a href="javascript:void(0)" title="3" class="three-stars">3</a></li>
                        <li><a href="javascript:void(0)" title="4" class="four-stars">4</a></li>
                        <li><a href="javascript:void(0)" title="5" class="five-stars">5</a></li>
                    </ul>
                </div>
            </div>
            <div class="xzw_starSys"><span>商品效果：</span>
                <div class="xzw_starBox">
                    <ul class="star">
                        <li><a href="javascript:void(0)" title="1" class="one-star">1</a></li>
                        <li><a href="javascript:void(0)" title="2" class="two-stars">2</a></li>
                        <li><a href="javascript:void(0)" title="3" class="three-stars">3</a></li>
                        <li><a href="javascript:void(0)" title="4" class="four-stars">4</a></li>
                        <li><a href="javascript:void(0)" title="5" class="five-stars">5</a></li>
                    </ul>
                </div>
            </div>
            <div class="xzw_starSys"><span>性价比：</span>
                <div class="xzw_starBox">
                    <ul class="star">
                        <li><a href="javascript:void(0)" title="1" class="one-star">1</a></li>
                        <li><a href="javascript:void(0)" title="2" class="two-stars">2</a></li>
                        <li><a href="javascript:void(0)" title="3" class="three-stars">3</a></li>
                        <li><a href="javascript:void(0)" title="4" class="four-stars">4</a></li>
                        <li><a href="javascript:void(0)" title="5" class="five-stars">5</a></li>
                    </ul>
                </div>
            </div>
            <div class="xzw_starSys"><span>服务专业：</span>
                <div class="xzw_starBox">
                    <ul class="star">
                        <li><a href="javascript:void(0)" title="1" class="one-star">1</a></li>
                        <li><a href="javascript:void(0)" title="2" class="two-stars">2</a></li>
                        <li><a href="javascript:void(0)" title="3" class="three-stars">3</a></li>
                        <li><a href="javascript:void(0)" title="4" class="four-stars">4</a></li>
                        <li><a href="javascript:void(0)" title="5" class="five-stars">5</a></li>
                    </ul>
                </div>
            </div>
            <div class="xzw_starSys"><span>服务态度：</span>
                <div class="xzw_starBox">
                    <ul class="star">
                        <li><a href="javascript:void(0)" title="1" class="one-star">1</a></li>
                        <li><a href="javascript:void(0)" title="2" class="two-stars">2</a></li>
                        <li><a href="javascript:void(0)" title="3" class="three-stars">3</a></li>
                        <li><a href="javascript:void(0)" title="4" class="four-stars">4</a></li>
                        <li><a href="javascript:void(0)" title="5" class="five-stars">5</a></li>
                    </ul>
                </div>
            </div>
            <span class="note">(满分100，每颗星代表4分)</span>
        </div>
        <div class="describtion">
        	<div><span>评价描述：</span></div>
            <div><input class="describinput" type="text" placeholder="巧克力蛋糕太甜了..." name="describtion"/></div>
            <div class="describsubmit" ><a href="">提交评价</a></div>
        </div>
   	</div>
</body>
</html>